<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>业主信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/font.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/index.css">
<script
	src="${pageContext.request.contextPath}/front/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">					
					</div>					
					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table layui-form" id="table-goodslist">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>所属房号</th>					
									<th>业主名称</th>					
									<th>身份证号</th>
									<th>联系方式</th>
									<th>入住时间</th>
									<th>业主照片</th>					
									<th>业主密码</th>
									<th>房屋面积</th>
								</tr>
							</thead>
							<tbody id="table-content">
							<tr>
								<td><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							</tbody>
						</table>
					</div>

					<div class="layui-card-body ">
						<div class="page">
							<div class="layui-table-page">
								<div id="layui-table-page1">
									<div class="layui-box layui-laypage layui-laypage-default"
										id="layui-laypage-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- 引入jQuery库 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery.js"></script>
	<!-- 引入jQuery-form -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery-form.js"></script>

<script>
console.log("${sessionScope.ownerSession.ownerPhoneNumber}");
let pageNum = 1;
let pageSize = 2;

owner_search_page();

function owner_search_page(){
	//对每页/条数变量进行校验
	pageSize = $("#layui-laypage-2 select").val();
	//如果不存在则设置初始值
	if(pageSize == null){
		pageSize = 2;
	}
	$.ajax({
		async:true,
		type:"get",
		url:"${pageContext.request.contextPath}/OwnerServlet",
		data:{
			op:"findByPhone",//手机号查找接口
			ownerPhoneNumber : "${sessionScope.ownerSession.ownerPhoneNumber}",
			
			pageNum: pageNum,//页码
			pageSize: pageSize//下拉框选中的每页记录数
		},
		contentType:"application/x-www-form-urlencoded",
		dataType:"json",
		success:function(result,status,xhr){
			//1.渲染表格的数据
			let content ="";
			if(result.data != null){

				$.each(result.data,function(i,obj){
					console.log(obj.ownerName);
					content += "<tr>"
						+ "<td><input type=\"checkbox\" name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"
						+ "<td>"
						+ obj.roomNo
						+ "</td>"
						+ "<td>"
						+ obj.ownerName
						+ "</td>"
						+ "<td>"
						+ obj.ownerId
						+ "</td>"
						+ "<td>"
						+ obj.ownerPhoneNumber
						+ "</td>"
						+ "<td>"
						+ obj.checkInTime
						+ "</td>";
						
					if(obj.ownerImage != null){
						//有图片就请求文件下载接口，从文件服务器中读取
						content += "<td><img width=\"50\" height=\"30\" οnclick=\"previewImg(this)\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?type=image&fileName="+obj.ownerImage+"\" /></td>"
					}else{
						//没有图片直接显示默认图
						content += "<td><img width=\"50\" height=\"30\" οnclick=\"previewImg(this)\" src=\"images/default.png\" /></td>";
					}
						
						
				content += "<td>"
						+ obj.ownerPassword
						+ "</td>"
						+ "<td>"
						+ obj.roomArea
						+ "</td>"
						
						+ "</tr>";
				});
				$("#table-content ").html(content);
			}else{
				$("#table-content").empty();
			}
			
			
			
			//渲染分页栏目
		//	let pageContent = "";
		//	if (result.data != null) {

				//判断是不是第一页
		//		if (result.data.pageNum == 1) {
			//		pageContent = "<span href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
		//		} else {
		//			pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
		//					+ (result.data.pageNum - 1)
		//					+ "\"><i class=\"layui-icon\">上一页</i></a>";
		//		}
		//		for (let i = 1; i <= result.data.pages; i++) {
					//判断当前页码
		//			if (i == result.data.pageNum) {
		//				pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
		//						+ i + "</em></span>";
		//			} else {
		//				pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
		//						+ i + "</a>";
		//			}

	//			}

				//判断是否是最后一页
		//		if (result.data.pageNum == result.data.pages) {
			//		pageContent += "<span href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\""
		//					+ (result.data.pageNum + 1)
		//					+ "\"><i class=\"layui-icon\">下一页</i></span>";
		//		} else {
		//			pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
		//					+ (result.data.pageNum + 1)
		//					+ "\"><i class=\"layui-icon\">下一页</i></a>"
		//		}

		//		pageContent += "<span class=\"layui-laypage-limits\">"
		//				+ "<select lay-ignore=\"\">"
		//				+ "<option value=\"2\" >2条/页</option>"
		//				+ "<option value=\"5\">5 条/页</option>"
		//				+ "<option value=\"10\">10 条/页</option>"
		//				+ "</select></span>";
		//		$("#layui-laypage-2").html(pageContent);

		//		$("#layui-laypage-2 select option")
		//				.each(
		//						function() {
		//							if ($(this).val() == result.data.pageSize) {
		//								$(this).prop(
		//										"selected",
		//										"selected");
		//							}
		//						});
		//	} else {
		//		$("#layui-laypage-2").html(pageContent);
		//	}
			
			
		},
		error:function(){
			alert("异步请求失败");
		}
	});
}

//上一页，下一页
$("body").on("click","#layui-laypage-2 a",function(){
	pageNum = $(this).data("page");
	owner_search_page();
});
//确定页码
$("body").on("click","#layui-laypage-2 button",function(){
	let inputPageNum = $("#layui-laypage-2 input ").val();
	let maxPage = $("#layui-laypage-2 input ").prop("max");
	if(parseInt(inputPageNum) >= 1 && parseInt(inputPageNum) <= parseInt(maxPage)){
		pageNum = inputPageNum;
		owner_search_page();
	}else{
		layui.use('layer', function(){
			layer.msg("输入页码只能在1-" +maxPage+ "之间" ,{icon:2,time:3000});
		});
	}
});

//下拉框
$("body").on("change","#layui-laypage-2 select",function(){
	pageNum = 1;
	owner_search_page();
});
	
//搜索
function owner_search(){
	 //设置页码
	 pageNum = 1;
	 //调用查询方法
	 owner_search_page();
 }
	
//删除
function owner_del(roomNo){
        layer.confirm('确认要删除吗？',{
        	icon:3,
        	title:'提示信息'
       },function(index){
            //请求后端控制器删除数据
            //location.href="${pageContext.request.contextPath}/OwnerServlet?op=delete&roomNO=" + roomNo;
            
            $.getJSON("${pageContext.request.contextPath}/OwnerServlet",{op:"delete",roomNo:roomNo},function(result,status,xhr){
            	if(result.data == true){
            		layui.use('layer',function(){
            			layer.msg(result.message,{icon:1,time:3000});
            		});
            		//删除成功后再次调用查询方法
            		//设置页码
            		pageNum = $("#layui-laypage-2 span.layui-laypage-curr").data("page");
            		console.log(pageNum);
            		//调用查询方法
            		owner_search();
            	}else{//删除失败
            		layui.use('layer',function(){
            			layer.msg(result.message,{icon:2,time:3000});
            		});
            	}
            });
        });
    }
</script>













<script>
	/*页面已进入就发起的请求*/
	/* 商品-查询*/

	/*商品-删除*/
	function goods_del(goodsId) {
		layer.confirm("确认要删除吗？", {
			icon : 3,
			title : "提示信息"
		}, function(index) {
			//异步请求后端删除接口
			$.getJSON("${pageContext.request.contextPath}/GoodsServlet", {
				op : "delete",
				goodsId : goodsId
			}, function(result, status, xhr) {
				if (result.data == true) {//删除成功
					layui.use('layer', function() {
						layer.msg(result.message, {
							icon : 1,
							time : 3000
						});
					});
					//删除成功之后再次调用查询方法
					goods_search();
				} else {//删除失败
					layui.use('layer', function() {
						layer.msg(result.message, {
							icon : 2,
							time : 3000
						});
					});
				}
			});
		});
	}
</script>
<script>
	/*商品-删除*///同步请求
	/**
	 function goods_del(goodsId){
	 layer.confirm('确认要删除吗？', {
	 icon : 3,
	 title : '提示信息'
	 }, function(index) {
	 //请求后端控制器删除数据
	 location.href="${pageContext.request.contextPath}/GoodsServlet?op=delete&goodsId="+goodsId;
	 });
	 }**/
	/**
	 //读取相应消息
	 let message="${requestScope.msg}";
	 if(message!=""){
	 //使用layui的layer弹出错误信息
	 layui.use('layer',function(){
	 layer.mas(message,{icon:1,time:3000});
	 });
	 }**/
</script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {

			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});

	/*用户-添加*/
	function member_add(title, url, id, w, h) {

		xadmin.open(title, url, id, w, h);
	}

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	/*用户-删除*/
	function member_del(goodsId) {
		layer.confirm('确认要删除吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//请求后端控制器删除数据
			$(obj).parents("tr").remove();
			layer.msg('已删除!', {
				icon : 1,
				time : 1000
			});
		});
	}

	function delAll(argument) {
		var ids = [];

		// 获取选中的id
		$('tbody input').each(function(index, el) {
			if ($(this).prop('checked')) {
				ids.push($(this).val())
			}
		});

		layer.confirm('确认要删除吗？' + ids.toString(), {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}
</script>
<script>
        //预览大小根据原图的大小决定弹窗的大小
        function previewImg(obj) {
        	alert("555");
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [height + 'px', width + 'px'],
                shadeClose: true,
                scrollbar: false,
                title: "用餐图片预览", //不显示标题  
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
                }
            });
        }
</script>
</body>
</html>